<template>
    <div>
        <!-- 推荐商品 -->
        <div class="activity-panel">
            <ul class="box" >
                <li class="content" v-for="item in recommendList" :key="item.id">
                    <img :src="item.productImageBig" alt="" class="i" />
                    <a href="" class="cover-link"></a>
                </li>
                <!-- <li class="content">
                    <img src="./images/2.jpg" alt="" class="i" />
                    <a href="" class="cover-link"></a>
                </li>
                <li class="content">
                    <img src="./images/3.png" alt="" class="i" />
                    <a href="" class="cover-link"></a>
                </li>
                <li class="content">
                    <img src="./images/4.jpg" alt="" class="i" />
                    <a href="" class="cover-link"></a>
                </li> -->
            </ul>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    name:'Recommend',
    props:['recommendList']
};
</script>

<style lang="less" scoped>
.activity-panel {
    width: 1220px;
    margin: 0 auto;
    .box {
        display: flex;
        overflow: hidden;
        position: relative;
        z-index: 0;
        margin-top: 25px;
        border: 1px solid rgba(0, 0, 0, 0.14);
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 3px 8px -6px rgb(0 0 0 / 10%);
        .content {
            float: left;
            position: relative;
            width: 25%;
            height: 200px;
            text-align: center;
            list-style: none;
            .i {
                display: block;
                width: 305px;
                height: 200px;
            }
            .cover-link{
                cursor: pointer;
                display: block;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 4;
                background: url();
                &:hover{
                    box-shadow: inset 0 0 38px rgba(0 0 0 / 8%);
                    transition: all .15s ease;
                }
            }
            :before {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
                border-left: 1px solid rgba(0, 0, 0, 0.1);
                width: 100%;
                height: 100%;
                content: '';
                pointer-events: none;
            }
        }
    }
}
</style>